<template>
  <!-- 医院Logo区域，SVG+canvas粒子特效 -->
  <div class="hospital-logo-container">
    <!-- 粒子特效canvas -->
    <canvas ref="canvasRef" class="logo-particles"></canvas>
    <!-- 医院风格SVG十字Logo -->
    <svg class="logo-svg" viewBox="0 0 80 80">
      <!-- 背景圆 -->
      <circle cx="40" cy="40" r="36" fill="#e3f2fd" />
      <!-- 医疗十字 -->
      <rect x="34" y="18" width="12" height="44" rx="4" fill="#409eff" />
      <rect x="18" y="34" width="44" height="12" rx="4" fill="#409eff" />
      <!-- 白色描边 -->
      <circle cx="40" cy="40" r="36" fill="none" stroke="#fff" stroke-width="3" />
    </svg>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 粒子特效参数
const canvasRef = ref(null)
const PARTICLE_NUM = 30
const PARTICLE_COLOR = '#90caf9'
const PARTICLE_RADIUS = 2
const PARTICLE_SPEED = 0.7

// 粒子对象数组
let particles = []

// 初始化粒子
function initParticles(width, height) {
  particles = Array.from({ length: PARTICLE_NUM }, () => ({
    x: Math.random() * width,
    y: Math.random() * height,
    dx: (Math.random() - 0.5) * PARTICLE_SPEED,
    dy: (Math.random() - 0.5) * PARTICLE_SPEED
  }))
}

// 粒子动画渲染
function animate(ctx, width, height) {
  ctx.clearRect(0, 0, width, height)
  // 绘制粒子
  for (const p of particles) {
    ctx.beginPath()
    ctx.arc(p.x, p.y, PARTICLE_RADIUS, 0, Math.PI * 2)
    ctx.fillStyle = PARTICLE_COLOR
    ctx.fill()
    // 粒子移动
    p.x += p.dx
    p.y += p.dy
    // 边界反弹
    if (p.x < 0 || p.x > width) p.dx *= -1
    if (p.y < 0 || p.y > height) p.dy *= -1
  }
  // 粒子连线
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const a = particles[i], b = particles[j]
      const dist = Math.hypot(a.x - b.x, a.y - b.y)
      if (dist < 40) {
        ctx.beginPath()
        ctx.moveTo(a.x, a.y)
        ctx.lineTo(b.x, b.y)
        ctx.strokeStyle = 'rgba(144,202,249,0.2)'
        ctx.lineWidth = 1
        ctx.stroke()
      }
    }
  }
  requestAnimationFrame(() => animate(ctx, width, height))
}

// 组件挂载后初始化canvas和动画
onMounted(() => {
  const canvas = canvasRef.value
  const width = canvas.width = 80
  const height = canvas.height = 80
  const ctx = canvas.getContext('2d')
  initParticles(width, height)
  animate(ctx, width, height)
})
</script>

<style scoped>
.hospital-logo-container {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-particles {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  z-index: 0;
}
.logo-svg {
  width: 80px;
  height: 80px;
  z-index: 1;
  position: relative;
  filter: drop-shadow(0 2px 8px #b3e5fc);
}
</style> 